<template>
  <div class="wrapper">
    <!-- <Chart id="performanceRate" style="width: 500px;height: 400px;" :option="option"></Chart> -->
    <barChart :chartData="chartData" :options="options"></barChart>
  </div>
</template>
  
<script>
import Chart from "@/components/chart/chart.vue";
import { getChartData } from "@/api/echarts";
import barChart from "../base/barChart.vue";
export default {
  name: "toPayFor",
  components: { Chart, barChart },
  props: [],
  data() {
    return {
      chartData: null,
      options: {
        id: "toPayFor",
        // title:"待付款金额"
      },
    };
  },
  mounted() {
    getChartData({ custom_chart_id: "27" }).then((res) => {
      const data = res.data.data;
      // console.log(data, "27");
      data.forEach((item) => {
        item.value = item.payable_money * 1;
        item.name = item.branch_id_name;
      });
      this.chartData = data;
    });
  },
  methods: {
    setOption() {
      this.option = {
        title: {
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "待付款金额",
            type: "pie",
            radius: "50%",
            data: this.chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>
  